<template>
  <div class="app-container">
    <div class="user-top">
      <div class="input-container">
        <span>员工账号:</span>
        <el-input v-model="pagemessage.employeeNumber" size="medium" placeholder="请输入快递员账号" />
      </div>
      <div class="input-container">
        <span>员工姓名:</span>
        <el-input v-model="pagemessage.name" size="medium" placeholder="请输入快递员姓名" />
      </div>
      <div class="input-container">
        <span class="user-work">工作模式:</span>
        <el-select v-model="pagemessage.workPatternName" class="model" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.names"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="block">
        <el-form>
          <el-form-item
            label="月份："
            style="margin-bottom: 20px"
          >
            <el-date-picker
              v-model="pagemessage.workDate"
              type="month"
              placeholder="请选择月份"
              value-format="yyyy-MM"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="container">
        <el-form style="width:350px;height:40px">
          <el-form-item label="所属机构：" class="select" style="margin-bottom:20px" label-width="110px">
            <Treeselect
              ref="treeselectRef"
              v-model="treeData.name"
              :options="treeData"
              :normalizer="normalizer"
              :searchable="true"
              no-options-text="暂无数据"
              no-results-text="暂无数据"
              style="width:100%"
              placeholder="请选择所属地机构"
              @select="selectAgency"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="user-btn">
        <el-button class="search" type="primary" @click="search">搜索</el-button>
        <el-button class="reset" type="text" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="user-bottom">
      <div class="btn-primary">
        <el-button class="search" type="primary" @click="$router.push('/user/workArrange-setting')">排班设置</el-button>
        <el-button class="reset" type="primary" plain @click="openPeopleSettingModal">绑定排班</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        border
        style="width: 100%;text-align: center;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          fixed
        />
        <el-table-column
          prop="employeeNumber"
          label="员工账号"
          fixed
          width="100"
        />
        <el-table-column
          prop="name"
          label="员工姓名"
          fixed
          width="100"
        />
        <el-table-column
          prop="phone"
          label="员工电话"
          fixed
          width="100"
        />
        <el-table-column
          prop="userType"
          label="员工角色"
          fixed
          width="100"
        >
          <template v-slot="{row}">
            <span v-if="row.userType===1">员工</span>
            <span v-else-if="row.userType===2">快递员</span>
            <span v-else>司机</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workPatternName"
          label="当前工作模式"
          fixed
          width="110"
        />
        <el-table-column
          v-for="(item, index) in tableData.length
            ? tableData[0].workSchedules
            : []"
          :key="item.index"
          class-name="date"
          :label="String(index + 1)"
        >
          <template slot-scope="scope">
            <div
              :class="{
                work: scope.row.workSchedules[index],
                rest: !scope.row.workSchedules[index]
              }"
            >
              {{ scope.row.workPatternName?scope.row.workSchedules[index] ? '上' : '休': '无' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagemessage.total"
        :page-size="pagemessage.pageSize"
        :current-page="pagemessage.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="changePage"
        @size-change="changePagesize"
      />
    </div>
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="566px"
      height="300px"
      class="workArrange-manage-people-setting"
    >
      <el-form label-width="120px">
        <el-form-item class="work-type">
          <el-radio
            v-model="workPatternType"
            label="1"
            @change="handleWorkType"
          >礼拜制</el-radio>
          <el-radio
            v-model="workPatternType"
            label="2"
            @change="handleWorkType"
          >连续制</el-radio>
        </el-form-item>
        <el-form-item
          label="模式名称:"
          prop="workPatternName"
        >
          <el-select
            v-model="workHistoryId"
            placeholder="请选择"
            class="history-name"
            @change="handleSelect"
          >
            <el-option
              v-for="item in workPatternType==='1'?options:options2"
              :key="item.id"
              :label="item.names"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          type="warning"
          class="save-btn"
          @click="confirm"
        >确认</el-button>
        <el-button
          plain
          class="cancel-btn"
          @click="handleClose"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getstaff, getOrganization, workPattern, peopleSet } from '@/api/employee'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      tableData: [],
      pagemessage: {
        page: 1,
        pageSize: 10,
        total: 0,
        employeeNumber: '',
        agentId: '',
        name: '',
        workPatternName: '',
        workPatternId: '',
        workDate: ''
      },
      treeData: [],
      options: [{ names: '', id: 0 }],
      options2: [{ names: '', id: 0 }],
      dialogVisible: false,
      multipleSelection: [],
      workPatternType: '1',
      workHistoryId: ''
    }
  },
  created() {
    this.getstaff()
    this.getOrganization()
    this.workPattern()
  },
  methods: {
    // 选择模式
    handleSelect(val) {
      this.workHistoryId = val
    },
    // 更改为选中的内容
    handleWorkType(val) {
      this.workPatternType = val
    },
    // 人工调整确认
    async confirm() {
      if (!this.workHistoryId) {
        return this.$message.error('请选择模式名称')
      }
      await peopleSet({
        workPatternId: this.workHistoryId,
        userIdList: this.multipleSelection,
        workPatternType: this.workPatternType
      }).then((res) => {
        if (!res) {
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
          this.handleClose()
          this.getstaff()
          this.workPatternType = '1'
          this.workPattern(this.workPatternType)
        } else {
          this.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false
      this.workPatternType = '1'
      this.workPattern(this.workPatternType)
      this.workHistoryId = ''
    },
    handleSelectionChange(val) {
      // 多选
      this.multipleSelection = val.map((item) => item.id)
    },
    // 打开人工调整弹窗
    openPeopleSettingModal() {
      if (!this.multipleSelection.length) {
        return this.$message({
          message: '请选择调整人员',
          type: 'error'
        })
      }
      this.dialogVisible = true
    },
    // 工作模式（下拉）
    async workPattern() {
      const msg = await workPattern()
      const res = msg[1]
      this.options = res.reduce((prex, next) => {
        return [...prex, { names: next.name, id: next.id }]
      }, [])
      const res2 = msg[2]
      this.options2 = res2.reduce((prex, next) => {
        return [...prex, { names: next.name, id: next.id }]
      }, [])
    },
    // 搜索
    search() {
      this.pagemessage.page = 1
      this.getstaff()
    },
    // 重置
    reset() {
      this.pagemessage.employeeNumber = ''
      this.pagemessage.name = ''
      this.pagemessage.workPatternName = ''
      this.getstaff()
      this.$refs.treeselectRef.clearSingleValue()
    },
    selectAgency(value) {
      this.pagemessage.agentId = value.id
    },
    // 获取树状机构信息
    async getOrganization() {
      const msg = await getOrganization()
      this.treeData = JSON.parse(msg)
    },
    // 获取当前页条码
    changePagesize(val) {
      this.pagemessage.pageSize = val
      this.pagemessage.page = 1
      this.getstaff()
    },
    // 获取当前页
    async changePage(num) {
      this.pagemessage.page = num
      await this.getstaff()
    },
    // 获取员工信息列表
    async getstaff() {
      const msg = await getstaff(this.pagemessage)
      this.tableData = msg.items
      this.pagemessage.total = parseInt(msg.counts)
      // this.$set(this.pagemessage, 'total', parseInt(msg.counts))
    }
  }
}
</script>

<style scoped lang="scss">
.workArrange-manage-people-setting {
  .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  .el-dialog__footer {
    padding-bottom: 40px;
  }
}
.work-type {
  .el-form-item__content {
    margin-left: 40px !important;
  }
  .el-radio:first-child {
    margin-right: 80px !important;
  }
  .el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}
.history-name {
  width: auto !important;
  .el-input__inner {
    width: 293px;
  }
}
.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}
.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}
.el-input--medium .el-input__inner{
  height: 45px;
}
.app-container {
  .user-top {
    background-color: #fff;
    padding: 20px 70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .input-container {
    display: flex;
    align-items: center;
    width: calc(33.33% - 40px); /* 计算每个输入框容器的宽度 */
    margin-bottom: 10px; /* 添加下边距实现间距效果 */
    span{
      width: 160px;
    }
    .user-work{
      width: 115px;
    }
    .model{
      width: 255px;
    }
  }

  .container {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }

  .user-btn{
    margin-top: 30px;
    width: 200px;
    margin-right: 115px;
    .search{
      width: 75px;
      height: 45px;
    }
    .reset{
      width: 75px;
      height: 45px;
      border: 1px solid #e1dfdf;
    }

  }
  .user-bottom{
    margin-top: 20px;
    padding: 30px 30px 0 30px;
    background-color: #fff;
    .btn-primary{
      margin-bottom: 20px;
    }
    .span-rest:before{
      width: 2px;
      height: 2px;
      background-color:#e15536;
    }
    .span-dian{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 7px;
      line-height: 5px;
      background-color:#e15536;
    }
    .span-point{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 7px;
      line-height: 5px;
      background-color:#1dc779;
    }
    .work{
      color: #419eff;
    }
  }
  .block{
    background-color: #fff;
    padding: 0px;
    text-align: center;
  }
}

</style>
